<!-- 全员排查 -->
<template>
	<view class="all-shoot-container">
		<view>
			<uni-data-checkbox mode="tag" v-model="queryForm.pageStatus" :localdata="tabs"></uni-data-checkbox>
		</view>
		<uni-nav-bar>
			<block slot="left" style="width: 0;">
			</block>
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" v-model="queryForm.hiddenDangerName" class="nav-bar-input" type="text"
					placeholder="请输入隐患名称" @confirm="confirm" />
			</view>
			<block slot="right" @click="searchBtn">
				<view class="city">
					搜索
				</view>
			</block>
		</uni-nav-bar>

		<view class="add-btn" v-if="queryForm.pageStatus == 1">
			<view class="middle-font" @click="goto(`/pages/trouble/allShootPage/allAdd`)">
				<uni-icons type="plusempty" size="25"></uni-icons>
				<text class="label">新增隐患</text>
			</view>
		</view>

		<!-- 审查项 -->
		<view class="check">
			<z-paging ref="paging" v-model="checkList"
				:style="{'top': queryForm.pageStatus == 1 ? '580rpx' : '400rpx' }" @query="queryList">
				<uni-card title="" extra="" v-for="(item) in checkList" :key="item.id">
					<uni-list>
						<uni-list-item title="隐患名称" :rightText="item.hiddenDangerName" />
						<uni-list-item title="隐患等级" :rightText="`${item.hiddenDangerLevel}`">

							<template v-slot:footer>
								<text class="custom-font" v-if="item.hiddenDangerLevel == 1">一般隐患</text>
								<text class="custom-font" v-else-if="item.hiddenDangerLevel == 2">重大隐患</text>
							</template>
						</uni-list-item>
						<uni-list-item title="所属单位" :rightText="item.companyName" />
						<uni-list-item title="所属部门" :rightText="item.deptName" />
						<!-- <uni-list-item title="隐患描述" :rightText="item.hiddenDangerInfo" ellipsis="1" /> -->
						<uni-list-item title="上报人" :rightText="item.informantName" />
						<uni-list-item title="上报时间" :rightText="item.informantTime" />
						<uni-list-item title="状态">
							<template v-slot:footer>
								<text class="custom-font">{{formatTaskStatus(item.hiddenDangerStatus)}}</text>
							</template>
						</uni-list-item>
						<uni-list-item title="代办人" :rightText="item.personToBeDone" />
						<uni-list-item title="">
							<template v-slot:footer>
								<button type="primary" size="mini" v-if="
				      item.hiddenDangerStatus == 1
				    " @click="handleSubmit(item)">提交</button>
								<button type="primary" size="mini" v-if="
					  item.hiddenDangerStatus == 3 && queryForm.pageStatus == 2
					" @click="handleReward(item)">奖励</button>
								<button type="primary" size="mini" v-else-if="
				      item.hiddenDangerStatus == 2 &&
				      item.permissionState == 1
				    " @click="handleExamine(`/pages/trouble/allShootPage/allExamin`, item)">审批</button>
							</template>
						</uni-list-item>
					</uni-list>


				</uni-card>
			</z-paging>


		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="奖励金额(元)" value="" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getAllShoot,
		listAllShoot,
		addAllShoot,
		sendAllShoot,
		submitAllShoot
	} from "@/api/hiddenTrouble/allShoot.js";
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				queryForm: {
					pageStatus: 1,
					pageNum: 1,
					pageSize: 10,
				},
				rewardForm: {},
				tabs: [{
						text: '我提交的',
						value: 1
					},
					{
						text: '审核管理',
						value: 2
					},
				],
				checkList: []
			}
		},
		methods: {
			//奖励
			async dialogInputConfirm(val) {
				let query = {
					id: this.checkId,
					awardMoney: val,
				};
				let res = await sendAllShoot(query);
				uni.showToast({
					title: "奖励成功",
					duration: 2000
				})
				uni.hideLoading()
				this.searchBtn()
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
			},
			//提交按钮
			async handleSubmit(row) {
				console.log("提交", row)
				let query = {
					id: row.id,
				};
				await submitAllShoot(query);
				uni.showToast({
					title: '提交成功'
				})
				this.searchBtn()
				this.$forceUpdate()
			},
			/** 奖励 */
			handleReward(row) {
				this.checkId = row.id
				this.$refs.popup.open('')
			},
			//关闭
			close() {
				this.$refs.popup.close()
			},
			//审批按钮
			handleExamine(url, row) {

				uni.navigateTo({
					url: url,
					success: (res) => {
						getAllShoot(row.id).then((response) => {

							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenedPage', {
								pageStatus: this.queryForm.pageStatus,
								detailData: response.data
							})
						})

					}
				});
			},
			goto(url) {
				uni.navigateTo({
					url: url,
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenedPage', {
							pageStatus: this.queryForm.pageStatus,


						})
					}
				});
			},

			//格式化状态
			formatTaskStatus(val) {
				if (val == 1) {
					return "待提交";
				} else if (val == 2) {
					return "审批中";
				} else if (val == 3) {
					return "已通过";
				} else if (val == 1001) {
					return "已奖励";
				} else if (val == 1002) {
					return "已驳回";
				}
			},
			/** 搜索按钮 */
			async searchBtn() {
				uni.showLoading({
					title: "加载中"
				})
				// this.queryForm.pageStatus = this.pageStatus;
				let res = await listAllShoot(this.queryForm);
				this.checkList = res.rows;
				uni.hideLoading()

			},
			//分页方法
			async queryList(pageNum, pageSize) {
				console.log("分页", pageNum, pageSize)
				this.queryForm.pageNum = pageNum
				this.queryForm.pageSize = pageSize
				const res = await listAllShoot(this.queryForm);
				// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				this.$refs.paging.complete(res.rows);
				// this.checkList = res.rows;
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			}
		},
		mounted() {
			this.searchBtn()
		},
		computed: {
			...mapGetters(["dept"])
		},
		watch: {
			"queryForm.pageStatus": {
				handler(val) {
					this.queryForm.pageStatus = val
					this.searchBtn()
					if (val == 2) {

					}


				},
				immediate: true
			},

			$route(to, from) {
				this.searchBtn()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all-shoot-container {
		$nav-height: 30px;
		padding: 24rpx;
		padding-top: 240rpx;

		.check {
			.custom-font {
				color: #999;
				font-size: 22rpx;
			}

		}

		::v-deep {
			.uni-navbar {
				.uni-navbar--border {
					background-color: transparent !important;
					border-bottom: none !important;

					.uni-navbar__header {
						background-color: transparent !important;

						.uni-navbar__header-btns-left {
							width: 0 !important;
						}

						.uni-navbar__header-btns-right {
							.city {
								color: #137EE9;
								font-size: 18px;
								font-weight: 400;
							}
						}
					}
				}
			}

			.add-btn {
				width: 100%;
				height: 175rpx;
				border: 2rpx dashed #C5C8CE;

				.middle-font {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;

					.label {
						color: #808695;
					}
				}
			}

			.uni-card {
				.uni-card__header {
					border: none;
				}

				.uni-card__content {
					.uni-group__content {
						padding: 0;
					}

				}
			}
		}

		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}

		.input-uni-icon {
			line-height: $nav-height;
		}

		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}
	}
</style>